<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">商品详情</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>
			<scroll-view class="center-back" scroll-y="true" style="width: 100%;">
				<view style="display: flex;">
					<image class="goodsimg" mode="aspectFill" :src="detailItem.picUrls"></image>
					<view class="goodsdesback">
						<view class="goodsname">{{detailItem.name}}</view>
						<view class="goodsmoney"><text class="bottom-money-unit">¥</text>{{detailItem.price}}</view>

						<view class="goodsOther">
							<image class="goodsotherimg" :src="phone_qyfw"></image>
							<view class="goodsotheritem">
								<view>· 有效期{{detailItem.expireDay}}天</view>
								<view>· 每{{detailItem.cycleUnit.desc}}可咨询{{detailItem.cycleTimes}}次</view>
							</view>
							<view class="goodsotheritem goodsotheritem2">
								<view>· 可发起总咨询数{{detailItem.consultCount}}次</view>
								<view>· 可咨询领域:{{detailItem.domainDict}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top-line"></view>
				<view class="webview-name">服务介绍</view>
				<view class="webview">
					<rich-text :nodes="detailItem.intro"></rich-text>
					<!-- 					<web-view v-if="detailItem.intro" :src="detailItem.intro"></web-view>
 -->
				</view>
			</scroll-view>
			<view class="bottom-back">
				<view class="bottom-money"><text class="bottom-money-unit">¥</text>{{detailItem.price}}</view>
				<view class="bottom-btn" @click="clickSureAction">确认购买</view>
			</view>
		</view>
		<associateCustomer v-if="showAssciate" v-on:selectCust='selectCust()'  @associtateCustomerClose='associtateCustomerClose'></associateCustomer>
		<addCustomer v-if="showAddCustomer" :editType='editType' v-on:successBack='updataRequest()'
			:rangeList='rangeList' :statusRangeList='statusRangeList' :hopeRangeList='hopeRangeList'
			@addCustomerClose='addCustomerClose'></addCustomer>
	</view>
</template>

<script>
	import associateCustomer from "@/packageC/PhonePC/buyServe/associateCustomer.vue"
	import addCustomer from "@/packageC/PhonePC/customer/addCustomer.vue"

	let app = ''

	export default {
		components: {
			associateCustomer,
			addCustomer
		},
		props: {
			selectID: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				role: '', //当前登录角色
				roleUrl: '',
				detailItem: {},
				phone_qyfw: getApp().globalData.baseImageUrl + '/phone_qyfw.png',
				showAssciate: false, //显示关联客户
				customerList: [],
				showAddCustomer: false,
				editType: 'add',
				rangeList: [], //
				statusRangeList: [],
				hopeRangeList: [], //
				custItem:{}
			}
		},
		mounted() {
			var _this = this;
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			this.getDetail();
			this.getCustomerList();
		},
		methods: {
			/**
			 * 获取详情
			 */
			async getDetail() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/goods/${_this.selectID}`,
					method: 'GET', //默认是GET
				})
				console.log('详情', res)
				if (res.data.code == 200) {
					_this.detailItem = res.data.data
					if (res.data.data.picUrls) {
						var picUrls = _this.$imageUrls({
							picUrls: res.data.data.picUrls,
							height: 400
						})
						_this.$set(_this.detailItem, 'picUrls', picUrls);
					}
					_this.$set(_this.detailItem, 'price', (res.data.data.price / 100).toFixed(2))

					if (res.data.data.domainDict == '-1') {
						_this.$set(_this.detailItem, 'domainDict', '不限')
					}
					if (res.data.data.consultCount == -1) {
						_this.$set(_this.detailItem, 'consultCount', '不限')
					}
				}
			},
			/**
			 * 查询可关联的客户
			 */
			async getCustomerList() {
				let _this = this
				let parmas = {
					page: 1,
					size: 10
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/customer/list`,
					data: parmas,
					method: 'POST', //默认是GET
				})
				console.log('关联', res)
				if (res.data.code == 200) {
					_this.customerList = res.data.data.list;
					if (_this.customerList.length == 0) {
						_this.requestDicData();
						_this.requestStatusDicData();
						_this.requestHopeDicData();
					}
				}
			},
			//点击确认购买
			clickSureAction() {
				console.log('333')
				if (this.customerList.length == 0) {
					this.editType = 'add';
					this.showAddCustomer = true
				} else {
					this.showAssciate = true

				}
			},
			
			//已关联客户返回
			selectCust(custItem){
				this.custItem = custItem;
				console.log(custItem)
				 this.buyIt();
			},
			
			//已关联客户购买
			async buyIt() {
				let _this = this
				uni.showLoading({
					title: "正在提交订单..."
				})
				console.log(app.globalData.userInfo)
				let data = {
					goodsId: _this.detailItem.id,
					goodsName: _this.detailItem.name,
					custId: _this.custItem.id,
					custName: _this.custItem.name,
					orderAmt: _this.detailItem.price,
					buyerId: app.globalData.userInfo.userId
				}
			
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/goodsOrder`,
					method: 'POST', //默认是GET
					data: data,
				})
				uni.hideLoading()
				console.log('订单提交结果', res)
				if (res.data.code == 200) {
					_this.payIt(res.data.data.id)
				}
			},
			/**
			 * 支付
			 */
			async payIt(id) {
				let _this = this
				uni.showLoading({
					title: "正在支付..."
				})
				let data = {
					id: id,
				}
			
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/goodsOrder/paySuccess`,
					method: 'PUT', //默认是GET
					data: data,
				})
				uni.hideLoading()
				console.log('支付结果', res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '购买成功!',
						icon: 'success',
						duration: 2000
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: -1
						})
					}, 2000);
				} else {
					uni.showToast({
						title: res.data.msg
					})
				}
			},
			
			//隐藏关联客户
			associtateCustomerClose(){
				this.showAssciate = false;
			},

			//隐藏新增客户
			addCustomerClose() {
				this.showAddCustomer = false
			},

			//客户类型
			async requestDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/param_customer_type",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.rangeList = arr;
					console.log(_this.rangeList)
				}
			},
			//权限类型
			async requestStatusDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/param_customer_perm",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.statusRangeList = arr;
					console.log(_this.statusRangeList)
				}
			},
			//组别标签
			async requestHopeDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/param_customer_group",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.hopeRangeList = arr;
					console.log(_this.hopeRangeList)
				}
			},

			closeBtnAction() {
				this.$emit('goodDeatilClose')
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 552px;
		height: 540px;
		padding: 24px;
		max-height: 540px;
		background-color: white;
		margin-top: -70px;
		border-radius: 4px;
		z-index: 1001;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	/*
	中间高度=总高 600- 20-21 - 20-60 + 14
	 */
	.center-back {
		width: 100%;
		max-height: 440px;
		height: 440px;
	}

	.item-back {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}




	.bottom-back {

		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 16px;
	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-money-unit {
		font-size: 14px;
		font-weight: 400;
		color: #F35C22;
	}

	.bottom-money {
		font-size: 22px;
		font-weight: 600;
		color: #F35C22;
		margin-right: 16px;
	}

	.goodsimg {
		width: 180px;
		height: 180px;
		min-width: 180px;
		border-radius: 4px;
		border: 1px solid #EEEEEE;

	}

	.goodsdesback {
		margin-left: 16px;
		margin-right: 16px;
		height: 180px;
		display: flex;
		flex-direction: column;
	}

	.goodsname {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
	}

	.goodsmoney {
		font-size: 22px;
		font-weight: 600;
		color: #F35C22;
		margin-top: 10px;
	}

	.goodsOther {
		width: 354px;
		background: #E8F7FB;
		border-radius: 4px;
		margin-bottom: 0px;
		margin-top: auto;
		align-items: center;
		display: flex;
	}

	.goodsotherimg {
		width: 56px;
		height: 56px;
	}

	.goodsotheritem {
		margin-left: 10px;
		width: 109px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.goodsotheritem2 {
		width: 160px;
	}

	.webview {
		margin-top: 15px;
		margin-bottom: 15px;
		width: 100%;
	}

	.webview-name {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-top: 20px;
	}
</style>
